<template>
  <!--分页-->
  <div class="publish_page">
    <div class="pageSelect">
      <div>
        <button @click="do_addPage(-1)">上一页</button>
        <ul>
          <li v-for="(item,index) in pageList" :key="index"  :class="pageActive[index]"
              v-text="item.name" @click="do_PageQry(item.name,index)"></li>
        </ul>
        <button @click="do_addPage(1)">下一页</button>
      </div>
    </div>
    <div class="pageRight" >
      <i>总共 <span v-text="pages">2</span>页</i>
      <i>到 <input type="text" v-model="curPage">页</i>
      <button @click="do_addPage(2)">确定</button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "cm_doPage",
      data(){
          return{
            pageList: [],//分页按钮
            pageActive: ['pageActive'],
            curPage:0,
            number1:"",
            countNumber:"",
            countNumber1:""
          }
      },
      props:{
        pages:{
          type:Number,
          default:0
        }
      },
    watch:{
      pages(newV,oldV){
        this.curPage=1
          this.do_init()
      }
    },
      methods:{
          do_init(){//初始化页数
            let count = 5
            this.number1 = this.pages % 5;//余数
            this.countNumber = parseInt(this.curPage / 5);//当前第几页求模 7/5==1
            if (this.curPage % 5 == 0) {
              this.countNumber--
            }
            if (this.pages <= 5) {
              count = this.pages
            } else {
              if (this.countNumber == parseInt(this.pages / 5)) {
                count = this.number1
              }
            }
            this.pageList = [];
            for (let i = 0; i < count; i++) {
              let numb = {};
              numb.name = this.countNumber * 5 + i + 1;
              this.pageList.push(numb)
            }
          },
        do_addPage(index) {//上下翻页
            let _doFalse=false
          try {
            let me = this;
            if (index == -1) {
              if (me.curPage > 1) {
                me.curPage--;
                if (me.curPage % 5 == 1) {
                  me.countNumber1 = me.curPage / 5 - 1
                }
              }
            }
            if (index == 1) {
              if (me.curPage != me.pages) {
                me.curPage++
              }
            }
            if (index == 2) {
              if (me.curPage <= 0) {
                me.$confirm({
               type:'温馨提示',
               msg:"最低查询不得小于 1 页",
               btn:{
                 ok:'ok'
               }
             })
                _doFalse=true
                return
              }
              if (me.curPage != parseInt(me.curPage)) {
                me.$confirm({
                  type:'温馨提示',
                  msg:"请输入整数查询",
                  btn:{
                    ok:'ok'
                  }
                })
                _doFalse=true
                return
              }
              if (me.curPage > me.pages) {
                me.$confirm({
                  type:'温馨提示',
                  msg:"最大不超过" + this.pages + "页",
                  btn:{
                    ok:'ok'
                  }
                })
                _doFalse=true
              } else {
                if (me.curPage == '') {
                  me.$confirm({
                    type:'温馨提示',
                    msg:"请输入查询页码",
                    btn:{
                      ok:'ok'
                    }
                  })
                  _doFalse=true
                }

              }

            }
            me.pageActive = []
            for (let i = 0; i < 5; i++) {
              if (me.curPage % 5 == i + 1) {

                me.pageActive.push('pageActive')
              } else {
                if (me.curPage % 5 == 0) {
                  me.pageActive[4] = 'pageActive'
                } else {
                  me.pageActive.push('no_pageActive')
                }
              }
            }
            if(!_doFalse){
              this.do_init()
            }
            let _page= JSON.parse(JSON.stringify(me.curPage))
           this.$emit("getCurPage",_page)
          } catch (e) {

          }
        },
        do_PageQry(num, index) {
          this.pageActive = []
          let me = this
          for (let i = 0; i < 5; i++) {
            if (index == i) {
              this.pageActive.push('pageActive')
            } else {
              this.pageActive.push('no_pageActive')
            }
          }
          me.curPage=num
          this.$emit("getCurPage",num)
        }

      }
    }
</script>

<style scoped>
  .publish_page{
    width: 1200px;
    margin: 20px auto;
    height: 50px;
    display: flex;
  }
  .publish_page .pageSelect{
    flex: 1;
    position: relative;
  }
  .publish_page .pageSelect div{
    position: absolute;
    right: 0;
  }
  .publish_page .pageSelect div *{
    float: left;
  }
  .publish_page button{
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 15px;
    padding: 3px 8px;
    display: inline-block;
    color: #666;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 8px;
  }
  .publish_page button:hover{
    background-color: #41bafe !important;
    color: white;
  }
  .publish_page .pageRight{
    flex: 0 0 220px;
  }
  .pageSelect ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pageSelect ul li{
    border: 1px solid gainsboro;
    padding: 0 8px;
    margin: 4px 5px 0 0;
    height: 24px;
    line-height: 24px;
    border-radius: 4px;
    cursor: pointer;
  }
  i{
    font-style: normal;
  }
  .pageRight i{
    position: relative;
  }
  .pageRight i input{
    height: 30px;
    line-height: 30px;
    width: 45px;
    border: 1px solid gainsboro;
text-align: center;
    position: relative;
    top: -2px;
  }
  .pageActive{
    background-color:#41bafe ;
    color: white;
  }

  .listContent ul{
    flex: 1;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .listContent ul:last-child{
    flex: 0 0 220px;
  }

</style>
